<script setup>
import * as echarts from 'echarts';
import request from "@/utils/request";
import { onMounted, ref } from 'vue';
import englishToChinese from '@/json/post';
import englishToChinese2 from '@/json/department';


const ship_id = ref("");
ship_id.value = "CN20067408805"

const translateJsonText = (jsonObject, translate) => {
  var tmpArray = []
  Object.keys(jsonObject).forEach(function (key) {
    var obj = {
      name: translate[key] || key,
      value: jsonObject[key]
    }
    tmpArray.push(obj)
  })
  // console.log(tmpArray)
  return tmpArray
}

onMounted(async () => {
  // initEcharts01();
  // initEcharts02();
})


const initEcharts01 = async () => {
  var chartDom = document.getElementById('eBox1');
  var staff_info_json = await request.get("/staff_info/query_ship_id?ship_id=" + ship_id.value);
  var myChart = echarts.init(chartDom);
  var option = {
    tooltip: {
      trigger: 'item'
    },
    color: ["#2a99c9", "#afe8ff", "#37dbbe", "#a9e8dc", "#06b8a2"],
    legend: {
      top: '5%',
      left: 'left',
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: '船舶配员信息各岗位人数',
        type: 'pie',
        radius: ['20%', '70%'],
        center: ['70%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        data: translateJsonText(staff_info_json, englishToChinese)
      }
    ]
  };

  option && myChart.setOption(option);

}

const initEcharts02 = async () => {
  var chartDom = document.getElementById('eBox2');
  var myChart = echarts.init(chartDom);

  var department_info_json = await request.get("/staff_info/query_ship_id/department?ship_id=" + ship_id.value);
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'left',
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
    },
    color: ["#2a99c9", "#afe8ff", "#37dbbe", "#a9e8dc", "#06b8a2"],
    label: {
      show: false,
      position: 'center'
    },
    series: [
      {
        name: '船舶配员信息（甲板部、轮机部、客运部）',
        type: 'pie',
        radius: ['20%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        data: translateJsonText(department_info_json, englishToChinese2)
      }
    ]
  };

  option && myChart.setOption(option);

}

</script>

<template>
  <div class="app-wrapper">
    <div id="eBox1"></div>
    <div id="eBox2"></div>
  </div>
</template>

<style lang="scss" scoped>
.app-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  #eBox1 {
    width: 66%;
    height: 100%;
  }

  #eBox2 {
    width: 34%;
    height: 100%;
  }
}
</style>